<template>
  <div>
    <div class="login" v-if="!login">
      <div class="title">第一步：登录用户信息</div>
      <el-row>
        <el-col :span="12">
          <el-form
            :model="ruleForm1"
            :rules="rules1"
            ref="ruleForm1"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="ruleForm1.username"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="psw">
              <el-input
                show-password
                v-model="ruleForm1.psw"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="info" v-else>
      <div class="title">第二步：信息提交</div>
      <el-row>
        <el-col :span="12">
          <el-form
            :model="ruleForm2"
            :rules="rules2"
            ref="ruleForm2"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="真实姓名" prop="name">
              <el-input
                autocomplete="new-password"
                v-model="ruleForm2.name"
                placeholder="请输入真实姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="identity">
              <el-input
                type="number"
                autocomplete="new-password"
                v-model="ruleForm2.identity"
                placeholder="请输入身份证号"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
              <el-input
                type="number"
                autocomplete="new-password"
                v-model="ruleForm2.tel"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="店铺类别" prop="tel">
              <el-select v-model="stateId" placeholder="请选择">
                <el-option
                  v-for="item in stateData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleTJ">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAuthCode, applyMerchant, getStoreCate } from "@/api/login";
import md5 from "js-md5";
export default {
  data() {
    return {
      login: false,
      ruleForm1: {
        username: "",
        psw: "",
      },
      rules1: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        psw: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      stateData: [],
      stateId: "",
      ruleForm2: {
        name: "",
        identity: "",
        tel: "",
      },
      rules2: {
        name: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
        identity: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        tel: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
      },
    };
  },
  methods: {
    async getAuthCode() {
      const { data, err, msg } = await getAuthCode({
        phone: this.ruleForm1.username,
        pass: md5(this.ruleForm1.psw),
      });
      if (err === 0) {
        sessionStorage.setItem("auth_code", data.auth_code);
        this.login = true;
      } else {
        this.$message({
          showClose: true,
          message: msg,
          type: "error",
        });
      }
    },
    async applyMerchant() {
      const { msg, err } = await applyMerchant({
        auth_code: sessionStorage.getItem("auth_code"),
        phone: this.ruleForm2.tel,
        id_no: this.ruleForm2.identity,
        cate: this.stateId,
        name: this.ruleForm2.name,
      });
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "申请成功, 审核中 !",
          type: "success",
        });
        this.$emit("handleClose");
      } else {
        this.$message({
          showClose: true,
          message: msg,
          type: "error",
        });
      }
    },
    //获取店铺分类
    async getStoreCate() {
      const { data, err } = await getStoreCate({});
      if (err === 0) {
        this.stateData = data;
      }
    },

    handleLogin() {
      this.$refs.ruleForm1.validate((valid) => {
        if (valid) {
          this.getAuthCode();
        } else {
          return false;
        }
      });
    },
    handleTJ() {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          this.applyMerchant();
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.getStoreCate();
  },
};
</script>

<style lang="scss" scoped>
.login {
  text-align: start;
  .title {
    padding: 0 30px 30px 40px;
    box-sizing: border-box;
    font-weight: bold;
  }
}
.info {
  text-align: start;
  .title {
    padding: 0 30px 30px 40px;
    box-sizing: border-box;
    font-weight: bold;
  }
}
</style>
